import { Component, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DelonFormModule, SFSchema } from '@delon/form';
import { _HttpClient, SettingsService } from '@delon/theme';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzSafeAny } from 'ng-zorro-antd/core/types';
import { NzGridModule } from 'ng-zorro-antd/grid';
import { NzInputModule } from 'ng-zorro-antd/input';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzModalRef } from 'ng-zorro-antd/modal';
import { NzSpinModule } from 'ng-zorro-antd/spin';
import { Api } from 'src/app/shared/api/api';
import { ResponseCode } from 'src/app/shared/response.code';
@Component({
  selector: 'app-security-email-bind',
  template: `<div class="modal-header">
      <div class="modal-title">绑定邮箱</div>
    </div>
    @if (!record) {
      <nz-spin class="modal-spin" />
    } @else {
      <sf #sf mode="edit" [schema]="schema" [formData]="record" button="none">
        <ng-template sf-template="email" let-i let-ui="ui" let-schema="schema">
          <div nz-row>
            <div nz-col [nzSpan]="16">
              <input
                nz-input
                [attr.id]="i.id"
                [disabled]="i.disabled"
                [attr.disabled]="i.disabled"
                [nzSize]="i.size"
                [ngModel]="i.value"
                (ngModelChange)="i.setValue($event)"
              />
            </div>
            <div nz-col [nzSpan]="8">
              <button nz-button type="button" nzType="link" (click)="sendEmailCode(i)">{{ ui.btnText }}</button>
            </div>
          </div>
        </ng-template>
        <div class="modal-footer">
          <button nz-button type="button" (click)="close()">关闭</button>
          <button nz-button type="submit" nzType="primary" (click)="save(sf.value)" [disabled]="!sf.valid" [nzLoading]="http.loading"
            >确认修改</button
          >
        </div>
      </sf>
    }`,
  imports: [NzSpinModule, DelonFormModule, NzButtonModule, FormsModule, NzInputModule, NzGridModule]
})
export class BindEmailComponent {
  record: NzSafeAny = {};
  schema: SFSchema = {
    properties: {
      email: {
        type: 'string',
        title: '邮箱',
        format: 'email',
        ui: {
          widget: 'custom',
          btnText: '发送验证码'
        }
      },
      code: { type: 'string', title: '验证码', minLength: 6 }
    },
    required: ['oldPwd', 'newPwd', 'confirm']
  };

  private readonly modal = inject(NzModalRef);
  public readonly settings = inject(SettingsService);
  private readonly msgSrv = inject(NzMessageService);
  public readonly http = inject(_HttpClient);

  sendEmailCode(e: NzSafeAny) {
    if (e.value && !e.showError) {
      this.http.post(`${Api.BaseUserApi}/email/code`, null, { email: e.value }).subscribe((res: NzSafeAny) => {
        if (res) {
          if (res.code === ResponseCode.SUCCESS) {
            this.msgSrv.success('发送成功，请至邮箱中查看');
            // this.modal.close(true);
          } else {
            this.msgSrv.warning(res.data);
          }
        } else {
          this.msgSrv.error('失败，未知错误');
        }
      });
    } else {
      this.msgSrv.error('请输入正确的邮箱');
    }
  }

  save(value: NzSafeAny) {
    console.log(value);
    // const id = this.settings.user['id'];
    this.http.put(`${Api.BaseUserApi}/email/bind/`, null, value).subscribe((res: NzSafeAny) => {
      if (res) {
        if (res.code === ResponseCode.SUCCESS) {
          this.msgSrv.success('成功');
          this.modal.close(true);
        } else {
          this.msgSrv.warning(res.data);
        }
      } else {
        this.msgSrv.error('失败，未知错误');
      }
    });
  }

  close() {
    this.modal.destroy();
  }
}
